<template>
  <view class="container-mineAddress">
    <header @click="$goPath(1)">
      <image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt="" />
      <view>我的收货地址</view>
    </header>

    <section>
      <view class="sect-box">
        <view class='address-item' v-for="(item, index) in addressList" :key="index">
          <image class='address-item-defaultImg' v-if="item.isDefault == 1" src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/address.png'
            mode='aspectFit|aspectFill|widthFix' alt="" />
          <view class='address-item-name' v-else>{{ item.isDefaultName }}</view>
          <view class='address-item-info'>
            <view class='address-item-info-contacts'>
              <text>{{ item.name }}</text>
              <view>{{ item.phone }}</view>
              <view class='default' v-if="item.isDefault == 1">默认</view>
            </view>
            <view class='address-item-info-address'>{{ `${item.province}${item.city}${item.area} ${item.detail}` }}</view>
          </view>
          <image class='address-item-info-icon' src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/del-address.png' mode='aspectFit|aspectFill|widthFix'
            alt="" @click="onDeleteAddress(item)" />
          <image class='address-item-info-icon' src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/edit-address.png' mode='aspectFit|aspectFill|widthFix'
            alt="" @click="goAddress('edit', item)" />
        </view>
      </view>
    </section>

    <footer>
      <button @click="goAddress('add')">新建地址</button>
    </footer>

    <u-modal :show="confirmVisible" showCancelButton content="确定要删除这条收货地址吗?" closeOnClickOverlay @confirm="confirm"
      @cancel="confirmVisible = false"></u-modal>

  </view>
</template>

<script>
import { getUserInfo } from '@/common/auth';
export default {
  data() {
    return {
      addressList: [],
      confirmVisible: false,
      delAddressItem: {},
    }
  },
  onShow() {
    this.getAddressList();
  },
  methods: {
    //获取收货地址列表
    async getAddressList() {
      let info = getUserInfo()
      let result = await this.$request.myAddress({ userId: info.userId })
      result.data.map(item => {
        if (!item.isDefault) {
          item.isDefaultName = item.name.slice(0, 1);
        }
      });
      this.addressList = result.data;
    },

    //跳转到 新增/编辑页面
    goAddress(type, item = {}) {
      if (this.addressList.length > 20) return this.$toast('地址最多只可以存20个')
      if (type == 'add') {
        this.$goPath(2, `/pagesA/pocketShop/mine/editAddress?type=${type}`)
      } else {
        this.$goPath(2, `/pagesA/pocketShop/mine/editAddress?type=${type}&detail=${JSON.stringify(item)}`)
      }
    },

    //删除地址
    onDeleteAddress(item) {
      this.confirmVisible = true;
      this.delAddressItem = item;
    },

    //确定删除
    confirm() {
      const param = { id: this.delAddressItem.id };
      this.$request.addressDelete(param)
      this.$toast('删除成功!')
      this.confirmVisible = false;
      setTimeout(() => {
        this.getAddressList();
      }, 500)
    },
  }

}
</script>
<style lang="scss" scoped>
.container-mineAddress {
  width: 100%;
  height: 100vh;
  font-size: 28rpx;
  font-family: 'PingFang SC-Medium';
  background-color: #FED14E;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  header {
    width: 100%;
    padding: 120rpx 24rpx 60rpx;
    border-radius: 0 0 40rpx 40rpx;
    box-sizing: border-box;
    color: #fff;
    background-color: #32B499;
    background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    font-size: 36rpx;
    font-family: 'PingFang SC-Bold';
    display: flex;
    align-items: center;
    position: relative;
    top: 0;
    left: 0;

    image {
      width: 16rpx;
      height: 28rpx;
      display: block;
      margin-right: 12rpx;
    }
  }

  section {
    height: 90%;
    position: relative;
    top: -50rpx;
    padding: 0 24rpx;
    box-sizing: border-box;

    .sect-box {
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 40rpx 40rpx 0 0;
      padding: 24rpx;
      padding-bottom: 150rpx;
      box-sizing: border-box;

      .address-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32rpx;

        .address-item-defaultImg {
          width: 60rpx;
          height: 60rpx;
          display: block;
        }

        .address-item-name {
          width: 2.5rem;
          height: 2.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #32B499;
          color: #fff;
          font-size: 32rpx;
          font-family: 'PingFang SC-Bold';
          border-radius: 50% 50%;
        }

        .address-item-info {
          flex: 1;
          padding-left: 12rpx;
          box-sizing: border-box;
          color: #999;
          font-size: 24rpx;

          .address-item-info-contacts {
            display: flex;
            align-items: center;
            color: #333333;
            font-size: 28rpx;

            text {
              font-family: 'PingFang SC-Bold';
              margin-right: 10rpx;
            }

            view:nth-child(2) {
              font-family: 'DIN-Regular';
            }

            .default {
              border-radius: 4rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 2rpx solid #32B499;
              font-size: 20rpx;
              color: #32B499;
              margin-left: 10rpx;
              padding: 0 4rpx;
              box-sizing: border-box;
            }

          }
        }

        .address-item-info-icon {
          width: 32rpx;
          height: 32rpx;
          display: block;
          margin-left: 24rpx;
          margin-top: 40rpx;
        }
      }
    }

  }

  footer {
    width: 100%;
    height: 150rpx;
    background: #FFFFFF;
    box-shadow: 0px -4rpx 8rpx 0px rgba(51, 51, 51, 0.1);
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    button {
      width: 90%;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-family: 'PingFang SC-Medium';
      background-color: #32B499;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

}
</style>